<template>
  <div class="op-group">
    <div class="op-title">数据转换</div>
    <div class="option-item" :class="{ active: bufferDetailVisible }">
      <!-- 近邻查询 -->
      <div class="detail-panel">
        <!-- 快速计算 -->
        <div class="sub-item">
          <span class="check-item">点转线</span>
          <div v-if="!bufferDetailVisible" class="check-item-btn">
            <a-button
              class="op-btn"
              size="small"
              @click="bufferDetailVisible = true"
              >编辑</a-button
            >
            <a-button
              :disabled="checkParams"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
        <!-- 参数配置 -->
        <div v-if="bufferDetailVisible" class="analysis-detail">
          <div class="prompt-information">
            <span class="prompt-text" title="注：根据类型划分将点图层转换线图层"
              >注：根据类型划分将点图层转化线图层</span
            >
            <a-popover
              :overlay-class-name="'gis-analysis-tool-help'"
              placement="topRight"
            >
              <template slot="content">
                <div class="help-popover-title">点转线</div>
                <div class="help-popover-text">
                  根据指定的类型划分和排序对当前点图层转化为线图层。
                </div>
              </template>
              <div class="prompt-help">
                <a-icon-font type="iconbangzhu" />
              </div>
            </a-popover>
          </div>
          <!-- 参数 -->
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">当前图层:</a-col>
            <a-col :span="18">
              {{ selectLayer ? selectLayer.name : '-- 请选择图层 --' }}
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">类型划分:</a-col>
            <a-col :span="18">
              <!-- 下拉选择 -->
              <a-select
                placeholder="选填"
                allow-clear
                style="width: 100%;"
                size="small"
                @change="changeColName"
              >
                <a-select-option
                  v-for="field in attributeFieldForLayer"
                  :key="field.name"
                  :value="field.name"
                  >{{ field.name }}</a-select-option
                >
              </a-select>
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">排序字段:</a-col>
            <a-col :span="18">
              <a-select
                v-model="orderCol"
                allow-clear
                style="width: 100%;"
                size="small"
              >
                <a-select-option
                  v-for="field in attributeFieldForLayer"
                  :key="field.name"
                  :value="field.name"
                  >{{ field.name }}</a-select-option
                >
              </a-select>
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">显示箭头:</a-col>
            <a-col :span="18">
              <a-radio-group v-model="hasArrow" name="radioGroup">
                <a-radio :value="true">有</a-radio>
                <a-radio :value="false">无</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">生成图层:</a-col>
            <a-col :span="18">
              <a-input
                v-model="layerName"
                size="small"
                placeholder="请输入"
              ></a-input>
            </a-col>
          </a-row>
          <div class="button-row">
            <a-button class="op-btn-sub" size="small" @click="cancel"
              >取消</a-button
            >
            <a-button
              :disabled="checkParams"
              :loading="loading"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 数据转换
 * @author Hou Jinhui
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'

@Component({
  components: {},
})
export default class DataConversion extends Vue {
  // 项目id
  public get projectId() {
    return GisStore.projectId
  }
  // tabIdg箭头s (1)
  public get tabId() {
    return GisStore.currentTabId
  }
  public bufferDetailVisible: boolean = false // 参数详情
  // 当前图层
  public get selectLayer() {
    return GisStore.selectLayer
  }
  public col: any = null // 类型划分(全局唯一判别不同线类型的属性字段)
  public attributeField: any = [] // 属性字段
  public orderCol: string | null | undefined = null // 排序字段
  public hasArrow: boolean = false // 显示箭头
  public layerName: string = '' // 近邻查询结果生成新图层名称
  public loading: boolean = false // 按钮加载状态

  @Watch('selectLayer.id')
  public onSelectLayer() {
    this.generateNewLayerName()
  }

  public mounted() {
    this.generateNewLayerName()
  }

  public changeColName(value: string) {
    this.col = value
  }

  // 根据原图层生成新图层名称
  private generateNewLayerName() {
    this.layerName = this.selectLayer
      ? `${this.selectLayer.name}-点转线图层1`
      : '近邻查询图层1'
  }

  //  点击取消，关闭推荐面板
  public cancel() {
    this.bufferDetailVisible = false
    this.loading = false
    // 重置表单
    this.col = null
    this.orderCol = null
    this.generateNewLayerName()
  }

  public get checkParams() {
    return !this.selectLayer?.id || !this.layerName.trim() || !this.orderCol
  }

  public get attributeFieldForLayer() {
    return GisStore.attributeFieldForLayer.filter(
      (column: any) => column.name !== 'geom' && column.name !== 'geom_4326'
    )
  }

  /**
   * 编辑确认
   */
  public async doOption() {
    const parameters: any = {
      projectId: this.projectId,
      tabId: this.tabId,
      currentLayerId: this.selectLayer?.id,
      table: this.selectLayer?.viewName,
      hasArrow: this.hasArrow,
      col: this.col === null ? undefined : this.col, // 用户不选择时改参数传入undefined，后端接收的载荷中无该属性
      orderCol: this.orderCol,
      layerName: this.layerName.trim(),
    }
    GisStore.setMapLoading(true)
    this.loading = true
    try {
      const response = await GisStore.pointToLineLayer(parameters)
      if (response.data.code === 100) {
        const layers: any = response.data.result
        const sortByOrder: any[] = layers.sort(
          (layer1: any, layer2: any) => layer1.order - layer2.order
        )
        GisStore.setFitBoundsAfterCreateNewLayer(false)
        this.$message.success(`操作成功，已生成新图层${sortByOrder[0].name}`)
      } else {
        this.$message.error(response.data.message)
      }
    } finally {
      GisStore.setMapLoading(false)
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('analysis-tool.less');
@import '@/components/gis/gis-analysis/analysis-tool/analysis-tool.less';
</style>

<style lang="less">
// 用户引导 step popover
.gis-analysis-tool-help {
  user-select: none;
  width: 248px !important;

  .help-popover-title {
    color: #5d637e;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.3px;
  }

  .help-popover-text {
    color: #5d637e;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.12px;
  }
}
</style>
